import React from 'react';
import './index.less' // 样式引入
import { connect } from 'react-redux';

// 子组件
import ListItem from './comp/ListItem'
import TestOne from './comp/TestOne'

// 公共参数
import { getQuery } from '@/utils/utils'

import { Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.testRef = React.createRef();
        this.state = {
            name: '详情页',
            list: [
                {
                    name: '测试1',
                    id: 111
                },
                {
                    name: '测试2',
                    id: 222
                }
            ],
            randomText: ''
        }
        const { search } = props.history.location
        console.log(getQuery(search))
    }
    goBack () {
        this.props.history.goBack();
    }
    setRandomText (text) {
        this.setState({
            randomText: text
        })
        this.testRef.current.test()
    }
    render () {
        const { name, list, randomText } = this.state
        const { userInfo } = this.props
        return (
            <div className="detail-container">
                <div className="rowsc">
                    <div>
                        <Breadcrumb>
                            <Breadcrumb.Item onClick={() => this.goBack()}>
                                <HomeOutlined />
                                <span>home</span>
                            </Breadcrumb.Item>
                            <Breadcrumb.Item>{name}</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    {
                        userInfo.userName && <div>{userInfo.userName}</div>
                    }
                </div>
                <TestOne ref={this.testRef} randomText={randomText} setRandomText={this.setRandomText.bind(this)} />
                <div className="list-box">
                    {
                        list.map(item => <ListItem data={item} key={item.id} />)
                    }
                </div>
            </div>
        )
    }
}

/**
 * @description: 需要渲染什么数据
 */
function mapStateToProps (state) {
    return {
        userInfo: state.userInfo
    }
}

export default connect(mapStateToProps)(App)